import React, { Component } from "react";
// react 组件引入
import "./App.css";
const props = {
  className:"big",
  "data-index":5
}
class App extends Component {
  render() {
    return (
      /* css class=>className  */
      <div className="app">
        <h1>(*^_^*)</h1>
        {/* label for=>htmlFor */}
        <label htmlFor="password">
          密码
          <input type="text" name="password" />
        </label>
        {/* 自定义属性 data-* */}
        <div data-index="123">data-index 属性</div>
        {/* 渲染 html内容 */}
        <div>{"<h1 style='color:yellow'>html 内容</h1>"}</div>
        <div dangerouslySetInnerHTML={ {__html:"<h1 style='color:yellow'>html 内容</h1>"} }></div>
        {/* checkbox bool */}
        {/* <input type="checkbox" checked="false"/> */}
        <input type="checkbox" checked={true} readOnly/>
        <input type="checkbox" checked={false} readOnly/>
        {/* 使用拓展运算符传属性 */}
        <h1 className={props.className} data-index={props["data-index"]}>多个属性</h1>
        <h1 {...props}>多个属性 使用拓展运算符</h1>
      </div>
    );
  }
}

export default App;
